<template>
    <div id="file_frame">
        <div>
            <a-breadcrumb style="margin: 0 0 16px 0">
                <a-breadcrumb-item v-for="path_item in path_stack" :key="path_item.path">
                    <a href="javascript:" @click="loadPath(path_item.path)">{{ path_item.name }}</a>
                </a-breadcrumb-item>
            </a-breadcrumb>
        </div>

        <div>
            <a-card>
                <a-card-grid
                    v-for="item in file_list"
                    :key="curr_path + item.name"
                    style="width:50%;"
                >
                    <template v-if="item.is_dir">
                        <a-icon :type="'folder'"></a-icon>

                        <span>&nbsp;</span>

                        <a
                            href="javascript:"
                            @click="loadPath(curr_path + item.name + '/')"
                        >{{ item.name }}</a>
                    </template>

                    <template v-else>
                        <a-icon :type="'file'"></a-icon>

                        <span>&nbsp;{{ item.name }}</span>
                    </template>
                </a-card-grid>
            </a-card>
        </div>
    </div>
</template>
                

<style lang="less">
#file_frame {
    text-align: left;
}
</style>


<script lang="ts">
import _ from "lodash";
import { Component, Vue, Prop } from "vue-property-decorator";
import { ipcRenderer } from "electron";
import { TEST_FILE_GET } from "../bglib/test_file";

@Component
export default class File extends Vue {
    public curr_path: string = "d:/";

    public path_stack: Object[] = [
        {
            name: "d:",
            path: "d:/"
        }
    ];

    public file_list: Object[] = [];

    created() {
        this.loadPath(this.curr_path);
    }

    async loadPath(path: string) {
        //let ret = await ipcRenderer.sendSync("test-file-get", {
        //    path
        //});
        let { value: items } = await this.$ipcR.send(TEST_FILE_GET, { path });

        let _dir = "";
        let _stack = [];
        let _dir_list = path.split("/");
        for (let i = 0; i < _dir_list.length; i++) {
            let item = _dir_list[i];
            if (item.length > 0) {
                _dir += item + "/";
                _stack.push({
                    name: item,
                    path: _dir
                });
            }
        }
        this.curr_path = _dir;
        this.path_stack = _stack;

        this.file_list = _.sortBy(items, x => [x.is_dir ? 1 : 2, x.name]);
    }

    async onClick() {}

    onSelect(selectedKeys: string[], event: Object) {
        //this.file_key = selectedKeys[0];
    }
}
</script>

